<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>季度数据</title>
    <style>
        .box {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            width: 600px;
            min-height: 400px;
            height: auto;
            border: 1px solid #ccc;
            margin: 50px auto;
            background: #f9f9f9;
        }

        .xx {
            width: 60px;
            background: #4cadaf;
            margin: 0 10px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            color: #fff;
        }

        .button {
            text-align: center;
            margin-top: 8px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <script>
        let arr = []
        for (i = 1; i <= 4; i++) {
            let num = +prompt('请输入第' + i + '季度的销售额')
            arr.push(num)
        }
        document.write(`<div class="box">
            <div>
            <div class="xx" style="height: ${arr[0]}px;">${arr[0]}</div>
            <div class="button">陈佳豪</div>
            </div>
            <div>
                <div class="xx" style="height: ${arr[1]}px;">${arr[1]}</div>
                <div class="button">第二季度</div>
                </div>
                <div>
                    <div class="xx" style="height: ${arr[2]}px;">${arr[2]}</div>
                    <div class="button">第三季度</div>
                    </div>
                    <div>
                        <div class="xx" style="height: ${arr[3]}px;">${arr[3]}</div>
                        <div class="button">第四季度</div>
                        </div>
                        </div>`)
    </script>
</body>

</html>